<template>
<div>
  <span style="float: right">欢迎您，{{userName}}&nbsp;&nbsp;&nbsp;<a href="#" @click.prevent="getOut">退出登录</a></span>
<!--  <el-button type="primary" @click="distribution" style="margin-left: 10px">配送</el-button>&nbsp;&nbsp;-->
  <el-descriptions class="margin-top" title="调度员信息" :column="3" :size="size" border>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user" ></i>
        用户名
      </template>
      <el-tag >{{ yardman.name}}</el-tag>


    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      <span > {{ yardman.phone}}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        性别
      </template>
      {{yardman.gender}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        年龄
      </template>
      <span > {{ yardman.age}}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        负责区域
      </template>
      <span v-for=" district in address " :key="address.id">{{district.district}}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        所属店铺
      </template>
      <el-tag size="small">{{ yardman.shop.name}}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <br>
<hr>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"

  >
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        fixed
        prop="id"
        label="订单编号"
        width="100">
    </el-table-column>
    <el-table-column
        prop="orderTime"
        label="下单时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="shippingAddress"
        label="配送详细地址"
        width="150">
    </el-table-column>
    <el-table-column
        prop="distributionArea"
        label="配送区域"
        width="160">
    </el-table-column>
    <el-table-column
        prop="goodsName"
        label="配送商品"
        width="150">
    </el-table-column>
    <el-table-column
        prop="goodsNum"
        label="商品数量"
        width="150">
    </el-table-column>
    <el-table-column
        prop="totalPrice"
        label="商品价格"
        width="150">
    </el-table-column>
    <el-table-column
        prop="shopName"
        label="店铺名称"
        width="150">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="配送备注"
        width="100">
    </el-table-column>
    <el-table-column
        prop="customer.id"
        label="客户ID"
        width="100">
    </el-table-column>
    <el-table-column
        prop="customer.name"
        label="客户姓名"
        width="100">
    </el-table-column>
    <el-table-column
        prop="customer.phone"
        label="客户电话"
        width="100">
    </el-table-column>
    <el-table-column
        prop="state"
        label="订单状态"
        width="100">
    </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            style="background-color: #02c75a"
            @click="handleEdit(scope.row)" >分配</el-button>
<!--        <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            @click="handleDelete(scope.row)" >删除</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
  <!--配送员对话框-->
  <el-dialog title="配送员列表"  :visible.sync="dialogFormVisible" @close="clearForm" center>
    <el-table
        ref="multipleTable"
        :data="courierData"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="120">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="district.district"
          label="所属区"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productTeam.name"
          label="所在组"
          width="100">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>

    </el-table>
<!--    <el-from>-->
<!--      -->
<!--      -->
<!--    </el-from>-->

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="setOK">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import yardman from "@/components/yardman";

export default {
  name: "yardman",
  data(){

    return{
      tableData:[],
      addressList:[],
      courierData:[],
      pendingorders:{},
      address:[],
      curPage:1,
      pageSize:4,
      total:0,
      state:'',
      yardman:{},
      customerPhone:'',
      dialogFormVisible: false,
      district:'',

    }
  },
  created() {
    this.yardman = JSON.parse(sessionStorage.getItem('user'));
    console.log(this.yardman)
    this.queryAddress();

    this.queryByPage();
    this.queryDistrict()

  },
  methods:{
    async queryDistrict(){
      let res= await this.$axios.get('/yardman/queryAddress',{
        params: {
          id:this.yardman.id
        }
      })
      this.address=res.data.data
    },
   //更换每页最大记录数
    handleSizeChange(val) {
      this.pageSize=val
      this.queryByPage()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.curPage=val
      this.queryByPage()
    },
    async queryByPage(){
      this.yardman = JSON.parse(sessionStorage.getItem('user'));
      this.userName=this.yardman.name
      let res= await this.$axios.get('/pendingOrders/queryByYardmanPage',{
        params:{
          yardmanId:this.yardman.id,
          curPage:this.curPage,
          pageSize:this.pageSize
        }
      })
      this.tableData=res.data.data
      console.log(this.tableData)
      this.total=res.data.total
    },
    async queryAddress(){
      let res= await this.$axios.get('/address/queryDistrict')
      this.addressList= res.data.data;
    },
    //配送按钮
    distribution(){
      let ids=this.$refs.multipleTable.selection

      if(ids.length===0){
        this.$message({
          type: 'warning',
          message: '你还没有选择要配送的订单!'
        });
        return
      }
      console.log(ids[0].distributionArea)
      let temp=''
      ids.forEach((item,i)=>{
        temp+=',&district='+item.distributionArea.substring(item.distributionArea.lastIndexOf(",")+1)
      })
      temp=temp.substring(1)
      console.log(temp)
      this.$confirm('确定要配送这些订单吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        let res=await this.$axios.get('/courier/queryByDistrict?'+temp)
        this.courierData=res.data.data
        this.dialogFormVisible=true
        if(res.data.code===200){
          this.$message({
            type: 'success',
            message: '配送成功!'
          });


        }else {
          this.$message({
            type: 'error',
            message: '配送失败'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消配送'
        });
      });
    },
    clearForm() {

    },

    async setOK(){
      console.log(this.pendingorders)
        let params =new URLSearchParams();
        params.append("pendingOrders",JSON.stringify(this.pendingorders))
      let res=await this.$axios.get('/pendingOrders/modify',{
        params:{
          id:this.pendingorders.id,
          orderTime:this.pendingorders.orderTime,
          shippingAddress:this.pendingorders.shippingAddress,
          distributionArea:this.pendingorders.distributionArea,
          goodsName:this.pendingorders.goodsName,
          remark:this.pendingorders.remark,
          goodsNum:this.pendingorders.goodsNum,
          totalPrice:this.pendingorders.totalPrice,
          state:"已接单",
          customerId:this.pendingorders.customer.id,
          customerName:this.pendingorders.customer.name,
          customerPhone:this.pendingorders.customer.phone,
        }
      })
      console.log("gggg")
      console.log(this.courierData[0].id)
      let resp=await this.$axios.get('/courier/savePendingOrders',{
        params:{
          courierId:this.courierData[0].id,
          pendingOrdersId:this.pendingorders.id,
        }
      })
      if(resp.data.code===200){
        this.curPage=1
        this.queryByPage()
        this.dialogFormVisible=false;
        this.$message({
          type: 'success',
          message: '配送成功!'
        });


      }else {
        this.$message({
          type: 'error',
          message: '配送失败'
        });
      }
    },
    async handleEdit(row) {
      let temp=row.distributionArea.substring(row.distributionArea.lastIndexOf(",")+1)
      this.pendingorders=row
      console.log(row.distributionArea.substring(row.distributionArea.lastIndexOf(",")+1))
      let res=await this.$axios.get('/courier/queryByDistrict?&district='+temp)
      this.courierData=res.data.data
      this.dialogFormVisible=true

    },
    getOut(){
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

</style>